<template>
	<div id="stationIndex">
		<el-row>
			<!-- 表格查询条件 -->
			<el-col :span="24">
				<el-form :inline="true" ref="stationForm" :model="queryForm">
					<el-form-item><el-input v-model="queryForm.name" placeholder="岗位名称/编号"></el-input></el-form-item>
					<el-form-item>
                        <gd_param type="select" 
                            paramCode="payGrades"
                            placeholder="薪资等级"
                            v-model="queryForm.payGrades" />
					</el-form-item>
					<el-form-item>
                        <gd_param type="select" 
                            paramCode="jobNature"
                            placeholder="工作性质"
                            v-model="queryForm.jobNature" />
					</el-form-item>
					<el-form-item>
                        <gd_param type="select" 
                            paramCode="jobLocation"
                            placeholder="工作地点"
                            v-model="queryForm.jobLocation" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
						<el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<!-- 数据表格 -->
			<el-col :span="24">
				<el-row>
					<el-col :span="24">
						<el-button type="primary" icon="el-icon-plus" @click="dialog.isEdit=false;dialog.saveOrEditDiv=true">新增岗位</el-button>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeletes">
							<el-button slot="reference" type="danger" icon="el-icon-delete">批量删除</el-button>
						</el-popconfirm>
					</el-col>
				</el-row>
				<el-row style="margin-top:10px;">
					<el-col :span="24">
						<el-table :data="tableData" border style="width: 100%" @selection-change="tableDataSelected">
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="code" label="编号"></el-table-column>
							<el-table-column prop="name" label="岗位名称"></el-table-column>
							<el-table-column prop="payGrades" label="薪资等级">
								<template slot-scope="scope">
                                    <gd_param type="show" 
                                        paramCode="payGrades"
                                        v-model="scope.row.payGrades" />
								</template>
							</el-table-column>
							<el-table-column prop="jobNature" label="工作性质">
								<template slot-scope="scope">
                                    <gd_param type="show" 
                                        paramCode="jobNature"
                                        v-model="scope.row.jobNature" />
								</template>
							</el-table-column>
							<el-table-column prop="jobLocation" label="工作地点">
								<template slot-scope="scope">
                                    <gd_param type="show" 
                                        paramCode="jobLocation"
                                        v-model="scope.row.jobLocation" />
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="180">
								<template slot-scope="scope">
									<el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
									<el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
									<el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
							@size-change="tableSizeChange"
							@current-change="tableCurrentChange"
							:current-page="pageData.page"
							:page-sizes="[10, 20, 40, 100]"
							:page-size="pageData.limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="pageData.total"
						></el-pagination>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<!-- 添加或修改-业务弹窗 -->
		<el-dialog
			:title="dialog.isEdit == true ? '编辑岗位' : '新增岗位'"
			:visible.sync="dialog.saveOrEditDiv"
			width="30%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form ref="saveOrEditDataForm" :rules="saveOrEditDataFormRules" :model="saveOrEditData" label-width="80px">
				<el-form-item label="岗位编号" prop="code"><el-input show-word-limit v-model="saveOrEditData.code" placeholder="请输入岗位编号" maxlength="10"></el-input></el-form-item>
				<el-form-item label="岗位名称" prop="name"><el-input show-word-limit v-model="saveOrEditData.name" placeholder="请输入岗位名称" maxlength="10"></el-input></el-form-item>
				<el-form-item label="薪资等级" prop="payGrades">
                    <gd_param type="select" 
                      paramCode="payGrades"
                      placeholder="薪资等级"
                      v-model="saveOrEditData.payGrades" />
				</el-form-item>
				<el-form-item label="工作性质" prop="jobNature">
                    <gd_param type="select" 
                      paramCode="jobNature"
                      placeholder="工作性质"
                      v-model="saveOrEditData.jobNature" />
				</el-form-item>
				<el-form-item label="工作地点" prop="jobLocation">
                    <gd_param type="select" 
                      paramCode="jobLocation"
                      placeholder="工作地点"
                      v-model="saveOrEditData.jobLocation" />
				</el-form-item>
				<el-form-item label="工作职责" prop="operatingDuty">
					<el-input
					show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入工作职责"
						v-model="saveOrEditData.operatingDuty"
					></el-input>
				</el-form-item>
				<el-form-item label="任职资质" prop="jobQualifications">
					<el-input
					show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入工作任职资质"
						v-model="saveOrEditData.jobQualifications"
					></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="comment">
					<el-input
					show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="如需备注输入描述"
						v-model="saveOrEditData.comment"
					></el-input>
				</el-form-item>
				<!-- 按钮组 -->
				<el-form-item>
					<el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">{{ dialog.isEdit == false ? '保存' : '确认修改' }}</el-button>
					<el-button
						@click="
							dialog.saveOrEditDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						取消
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<!-- 添加或修改-业务弹窗 -->
		<el-dialog
			title="岗位详情"
			:visible.sync="dialog.showDiv"
			width="30%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form ref="showDataForm"  :model="showData" label-width="80px">
				<el-form-item label="岗位编号" prop="code"><el-tag  effect="plain" v-if="showData.code">{{ showData.code }}</el-tag></el-form-item>
				<el-form-item label="岗位名称" prop="name"><el-tag  effect="plain" v-if="showData.name">{{ showData.name }}</el-tag></el-form-item>
				<el-form-item label="薪资等级" prop="payGrades">
                    <gd_param type="show" paramCode="payGrades" v-model="showData.payGrades" />
				</el-form-item>
				<el-form-item label="工作性质" prop="jobNature">
                    <gd_param type="show" paramCode="jobNature" v-model="showData.jobNature" />
				</el-form-item>
				<el-form-item label="工作地点" prop="jobLocation">
                    <gd_param type="show" paramCode="jobLocation" v-model="showData.jobLocation" />
				</el-form-item>
				<el-form-item label="工作职责" prop="operatingDuty">
					<el-tag  effect="plain" v-if="showData.operatingDuty">{{ showData.operatingDuty }}</el-tag>
				</el-form-item>
				<el-form-item label="任职资质" prop="jobQualifications">
					<el-tag  effect="plain" v-if="showData.jobQualifications">{{ showData.jobQualifications }}</el-tag>
				</el-form-item>
				<el-form-item label="备注" prop="comment">
					<el-tag  effect="plain" v-if="showData.comment">{{ showData.comment }}</el-tag>
				</el-form-item>
				<!-- 按钮组 -->
				<el-form-item>
					<el-button
						@click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						关闭
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		
	</div>
</template>

<script>
import gd_param from "@/components/mycomponents/gd_param.vue";
import * as axiosAPI from '@/api/station.js';
export default {
	name: 'stationIndex',
    components:{gd_param},
	data() {
		return {
			//查询表单数据
			queryForm: {
				name: null,
				payGrades: null,
				jobNature: null,
				jobLocation: null
			},
			//表格数据
			tableData: [],
			//主表-分页数据
			pageData: {
				page: 1,
				size: 10,
				total: 0
			},
			//当前表格复选数据
			nowTableSelected: [],
			//弹窗状态
			dialog: {
				isEdit: false,
				saveOrEditDiv: false,
				showDiv: false
			},
			//添加或编辑表单数据
			saveOrEditData: {
				stationID: null,
				comment: null,
				name: null,
				code: null,
				payGrades: null,
				jobNature: null,
				jobLocation: null,
				operatingDuty: null,
				jobQualifications: null
			},
			//添加编辑表单-检验
			saveOrEditDataFormRules:{
				code: { required: true, message: '请输入岗位编号', trigger: 'blur' },
				name: { required: true, message: '请输入岗位名称', trigger: 'blur' },
				payGrades: { required: true, message: '请选择薪资等级', trigger: 'change' },
				jobNature: { required: true, message: '请选择工作性质', trigger: 'change' },
				jobLocation: { required: true, message: '请选择工作位置', trigger: 'change' }
			},
			//展示表单数据
			showData: {
				stationID: null,
				comment: null,
				name: null,
				code: null,
				payGrades: null,
				jobNature: null,
				jobLocation: null,
				operatingDuty: null,
				jobQualifications: null
			},
			//表单加载值
			formLoading: false
		};
	},
	mounted() {
		this.getTableDatas();
	},
	methods: {
		//查询表格数据
		getTableDatas() {
			let _this = this;
            axiosAPI.pages(_this.queryForm, _this.pageData)
				.then(function(response) {
					console.log(response);
					if (response.code == '0000') {
						_this.tableData = response.data.rows;
						_this.pageData.total = response.data.total;
					}
				});
		},
		//重置查询条件表单
		resetQueryForm() {
			this.queryForm = {
				name: null,
				payGrades: null,
				jobNature: null,
				jobLocation: null
			};
			this.getTableDatas();
		},
		//重置添加、编辑、展示表单
		resetAddOrEditOrShowForm() {
			this.showData = {
				stationID: null,
				comment: null,
				name: null,
				code: null,
				payGrades: null,
				jobNature: null,
				jobLocation: null,
				operatingDuty: null,
				jobQualifications: null
			};
			this.saveOrEditData = {
				stationID: null,
				comment: null,
				name: null,
				code: null,
				payGrades: null,
				jobNature: null,
				jobLocation: null,
				operatingDuty: null,
				jobQualifications: null
			};
		},
		//提交-添加、编辑表单
		submitSaveOrEdit() {
			let _this = this;
			this.$refs.saveOrEditDataForm.validate(valid => {
				if (valid) {
					this.formLoading = true;
					let _this = this;
                    if(_this.dialog.isEdit == true){// 编辑
                        
                        axiosAPI.update(_this.saveOrEditData)
                            .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
                        });
					
                    }else{ // 添加
                        axiosAPI.add(_this.saveOrEditData)
                            .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
                        });
                    }
                }
		});
        },
		//提交-删除
		submitDelete(ids){
			let _this = this;
            axiosAPI.deletes(ids)
				.then(res => {
					if (res.code == '0000') {
						_this.getTableDatas();
					}
				});
		},
		//分页条目数切换
		tableSizeChange(size) {
			this.pageData.limit = size;
			this.getTableDatas();
		},
		//页码切换
		tableCurrentChange(page) {
			this.pageData.page = page;
			this.getTableDatas();
		},
		//行-查看
		rowShow(data) {
			this.showData = JSON.parse(JSON.stringify(data));
			this.dialog.showDiv = true;
		},
		//行-编辑
		rowEdit(data) {
			this.dialog.saveOrEditDiv = true;
			this.saveOrEditData = JSON.parse(JSON.stringify(data));
			this.dialog.isEdit = true;
		},
		//行-删除
		rowDelete(data) {
			this.$confirm('确定要删除这行数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.submitDelete(data.stationID);
			});
		},
		//点击批量删除
		moreDeletes() {
			if(this.nowTableSelected.length<=0){
				this.$notify.warning({
					title: '删除提示',
					message: '请至少选择一条数据再删除'
				});
				return;
			}
			let ids = '';
			
			for (var i in this.nowTableSelected) {
				ids += this.nowTableSelected[i].stationID + ',';
			}
			
			ids = ids.substring(0, ids.length - 1);
			
			//调用删除
			this.submitDelete(ids);
		},
		//表格批量选择
		tableDataSelected(data){
			this.nowTableSelected = data;
		}
		
	}
};
</script>

<style scoped></style>
